<template>
  <div>
    <div class="list-table">
      <div class=" area-header">
        <span class="area-header-title">{{ $t('DataRoom') }}</span>
      </div>
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item label="" prop="type">
          <el-select v-model="queryParams.type" size="small" clearable :placeholder="$t('请选择')">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="'(' + dict.number + ') ' + $t(dict.dictLabel)"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="type">
          <el-radio-group v-model="queryParams.radio" class="query-radio">
            <el-radio v-for="dict in radioOptions" :key="dict.dictValue" :label="dict.dictValue">
              <i class="prefix-number" :style="{ 'background': dict.bg }">{{ dict.number }}</i>{{ $t(dict.dictLabel) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" size="mini" type="text" style="color: #b4b4b4;padding: 0;">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="dataRoomList"
        tooltip-effect="darkTable"
        row-key="id"
        :indent="12"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @select="select"
        @select-all="selectAll"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="30"
        />
        <el-table-column :label="$t('文档类型')" align="left" prop="fileType" width="250" class-name="fileType">
          <template slot-scope="scope">
            <span>{{ scope.row.fileType }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')" align="left" prop="remark" width="250">
          <template slot-scope="scope">
            <div v-if="!scope.row.children" class="room-content" @click="remarkOpen = true">{{ scope.row.remark }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('时间')" align="left" prop="times" width="250">
          <template slot-scope="scope">
            <template v-if="!scope.row.children">
              <div v-if="!scope.row.isTime" class="main-room" @click="showInput(scope.row,'times')">
                <div v-if="scope.row.times.length > 0">{{ parseTime(scope.row.times[0]) }} / {{ parseTime(scope.row.times[1]) }}</div>
              </div>
              <div v-if="scope.row.isTime" class="main-room">
                <el-date-picker
                  v-model="scope.row.times"
                  size="mini"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  style="width: 100%;"
                  @blur="scope.row.isTime = false"
                />
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column :label="$t('文件')" align="left" prop="file" width="120">
          <template slot-scope="scope">
            <span v-if="!scope.row.children" class="link-type" @click="formOpen = true">{{ scope.row.file }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('状态')" align="left" prop="type" width="150">
          <template slot-scope="scope">
            <template v-if="!scope.row.children">
              <div v-if="!scope.row.isType" class="main-room" @click="showInput(scope.row,'type')">
                <span class="tag-type" :style="{ 'background': formatBg(scope.row.type) }">{{ formatType(scope.row.type) }}</span>
              </div>
              <div v-if="scope.row.isType" class="main-room">
                <el-select v-model="scope.row.type" size="mini" clearable :placeholder="$t('请选择')" @change="onBlur(scope.row,'type')">
                  <el-option
                    v-for="dict in radioOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column :label="$t('负责人')" align="left" prop="user" width="120">
          <template slot-scope="scope">
            <div v-if="!scope.row.children">{{ scope.row.user }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('评论')" align="left" prop="comment" min-width="200">
          <template slot-scope="scope">
            <div v-if="!scope.row.children" class="room-content" @click="commentOpen = true">{{ scope.row.comment }}</div>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-dialog v-el-drag-dialog :title="$t('文件')" :visible.sync="formOpen" width="70%" :close-on-click-modal="false" :lock-scroll="false" custom-class="">
      <div class="">
        <FileTable :list.sync="form.fileList" data-type="" has-permi="" :btn-show="!otherBtnHide" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formOpen = false">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="formOpen = false">{{ $t('确定') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog v-el-drag-dialog :title="$t('备注')" :visible.sync="remarkOpen" width="70%" :close-on-click-modal="false" :lock-scroll="false" custom-class="">
      <div v-if="remarkOpen" class="">
        <EditorTxt v-model="form.remark" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarkOpen = false">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="remarkOpen = false">{{ $t('确定') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog v-el-drag-dialog :title="$t('评论')" :visible.sync="commentOpen" width="35%" :close-on-click-modal="false" :lock-scroll="false" custom-class="commentOpen">
      <div class="textArea">
        <div class="task-comment-activity" style="clear: both;border-top: 0;">
          <div class="modal-row-content">
            <div v-for="(context, index) in contextList" :key="index" class="borderBottom">
              <div v-if="context.type === '1'" class="comment-item">
                <span v-if="context.avatar !== null" class="avatar-icon">
                  <el-image :src="context.avatar" style="background: #ff000000" />
                </span>
                <span v-else class="avatar-icon" style="background-color:#84e17e;">
                  <span>{{ $t(context.nickName) }}</span>
                </span>
                <div class="comment-item-wrap">
                  <div class="comment-item-meta">
                    <a class="comment-name">
                      <span class="ng-binding">{{ $t(context.nickName) }}</span>
                    </a>
                    <span class="comment-time ng-binding">{{ context.createTime }}</span>
                  </div>
                  <div class="comment-item-content" v-html="context.context" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-detail-footer">
        <comment-editor ref="commentEditorRef" :upload="true" @submit="submitContext" @elIconRefresh="elIconRefresh" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commentEditor from '@/components/CommentEditor'
import EditorTxt from '@/components/Tinymce'
import { getByWfNodeId } from '@/api/dd/data/ddBase'
export default {
  components: {
    EditorTxt,
    commentEditor
  },
  data() {
      return {
          loading: false,
          otherBtnHide: false,
          formOpen: false,
          commentOpen: false,
          remarkOpen: false,
          form: {
            fileList: []
          },
          queryParams: {
              type: '0'
          },
          typeOptions: [
              { dictLabel: '全部', dictValue: '0', number: '5' },
              { dictLabel: '指派给我', dictValue: '1', number: '3' },
              { dictLabel: '本周', dictValue: '2', number: '3' }
          ],
          radioOptions: [
              { dictLabel: '没有开始', dictValue: '0', number: '5', bg: '#FEF4BD' },
              { dictLabel: '有一定风险', dictValue: '1', number: '3', bg: '#F2A19F' },
              { dictLabel: '进行中', dictValue: '2', number: '3', bg: '#A7D2FA' },
              { dictLabel: '进度落后', dictValue: '3', number: '3', bg: '#F7CCA3' },
              { dictLabel: '不适用', dictValue: '4', number: '3', bg: '#B9F0EA' },
              { dictLabel: '完成', dictValue: '5', number: '3', bg: '#9BEAC3' }
          ],
          defaultCheckKeys: [],
          treeData: [
            {
              name: '父级类型',
              id: '1',
              children: [
                {
                  name: '子级类型1',
                  id: '1-1'
                },
                {
                  name: '子级类型2',
                  id: '1-2'
                }
              ]
            },
            {
              name: '父级类型',
              id: '2',
              children: [
                {
                  name: '子级类型1',
                  id: '2-1'
                },
                {
                  name: '子级类型2',
                  id: '2-2'
                },
                {
                  name: '子级类型3',
                  id: '2-3'
                },
                {
                  name: '子级类型4',
                  id: '2-4'
                },
                {
                  name: '子级类型5',
                  id: '2-5'
                }
              ]
            }
          ],
          defaultProps: {
              children: 'children',
              label: 'name'
          },
          dataRoomList: [
              {
                id: '1',
                fileType: '父级类型', isTime: false, isType: false,
                children: [
                  {
                    id: '1-1',
                    fileType: '子级类型1',
                    remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                    children: [
                      {
                        id: '1-11',
                        fileType: '子级类型11',
                        remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                        children: null
                      }, {
                        id: '1-22',
                        fileType: '子级类型22',
                        remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                        children: null
                      }
                    ]
                  }, {
                    id: '1-2',
                    fileType: '子级类型2',
                    remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                    children: null
                  }
                ]
              },
              {
                id: '2',
                fileType: '父级类型2', isTime: false, isType: false,
                children: [
                  {
                    id: '2-1',
                    fileType: '子级类型2',
                    remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                    children: [
                      {
                        id: '2-11',
                        fileType: '子级类型22',
                        remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                        children: null
                      }, {
                        id: '2-22',
                        fileType: '子级类型22',
                        remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                        children: null
                      }
                    ]
                  }, {
                    id: '12-2',
                    fileType: '子级类型22',
                    remark: '', times: '', file: '0', type: '0', user: 'Demo', comment: '', isTime: false, isType: false,
                    children: null
                  }
                ]
              }
          ],
          contextList: [
            {
            'searchValue': null,
            'id': '125b16938bf94b77adfb0376203b619c',
            'createTime': '2024-01-02 15:22:45',
            'updateTime': '2024-01-02 15:22:45',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '项目负责人',
            'avatar': null,
            'context': '系统管理员刚刚发起了文件讨论:「J博士投资管理系统-流程打印.pdf」, 大家快来围观一下!',
            'type': '0'
          },
          {
            'searchValue': null,
            'id': 'f27e26bd37db4cf6bc07f888fb57bc6c',
            'createTime': '2024-01-02 15:23:47',
            'updateTime': '2024-01-02 15:23:47',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '项目负责人',
            'avatar': null,
            'context': '项目负责人上传文件：下载、日志、讨论、标签、删除、上传',
            'type': '1'
          },
          {
            'searchValue': null,
            'id': 'dffa59e55f61412bb6537ac2d493ec5a',
            'createTime': '2024-01-02 15:37:42',
            'updateTime': '2024-01-02 15:37:42',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '系统管理员',
            'avatar': '',
            'context': 'admin对该文件：下载、移动、复制、日志、讨论、标签、删除、上传',
            'type': '1'
          },
          {
            'searchValue': null,
            'id': '3dcb89cba1694e0cb204fdebaad5bd7b',
            'createTime': '2024-01-02 15:37:43',
            'updateTime': '2024-01-02 15:37:43',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '系统管理员',
            'avatar': '',
            'context': '系统管理员更新了成员:系统管理员,项目负责人,',
            'type': '0'
          },
          {
            'searchValue': null,
            'id': 'f031fc1c4b7e4c46bffb8d547d2b712d',
            'createTime': '2024-01-02 15:45:09',
            'updateTime': '2024-01-02 15:45:09',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '其他项目角色',
            'avatar': null,
            'context': '其他项目角色更新了成员:系统管理员,项目负责人,其他项目角色,',
            'type': '0'
          },
          {
            'searchValue': null,
            'id': 'f918074d0e574c42a889b5b36a082922',
            'createTime': '2024-01-02 15:45:09',
            'updateTime': '2024-01-02 15:45:09',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '其他项目角色',
            'avatar': null,
            'context': '其他角色：上传、删除-本人、还原删除\n对该文件：讨论、标签、上传',
            'type': '1'
          },
          {
            'searchValue': null,
            'id': '28efbda2a99946d2b127c57ac23f71a0',
            'createTime': '2024-01-02 16:12:02',
            'updateTime': '2024-01-02 16:12:02',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '系统管理员',
            'avatar': '',
            'context': '历史数据初始化需要考虑，现阶段直接登录(未更新配置)会报错',
            'type': '1'
          },
          {
            'searchValue': null,
            'id': 'ffb5b112b44a4d718eb2dee7ae089c91',
            'createTime': '2024-01-03 16:25:26',
            'updateTime': '2024-01-03 16:25:26',
            'remark': null,
            'parentId': '0e84b4fd11c14b4a97c41efb461904ce',
            'nickName': '系统管理员',
            'avatar': '',
            'context': '你好',
            'type': '1'
          }
        ]
      }
  },
  created() {
      this.$bus.$emit('async_done')
  },
  methods: {
    init(data) {
      this.loading = true
        getByWfNodeId(data.wfNodeId).then(response => {
          this.dataRoomList = response.data
          this.loading = false
        })
    },
    setChildren(children, type) {
      // 编辑多个子层级
      children.map(j => {
        this.toggleSelection(j, type)
        if (j.children) {
          this.setChildren(j.children, type)
        }
      })
    },
    // 选中父节点时，子节点一起选中取消
    select(selection, row) {
      const hasSelect = selection.some(el => {
        return row.id === el.id
      })
      if (hasSelect) {
        if (row.children) {
          // 解决子组件没有被勾选到
          this.setChildren(row.children, true)
        }
      } else {
        if (row.children) {
          this.setChildren(row.children, false)
        }
      }
    },
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(row, select)
        })
      }
    },
    // 选择全部
    selectAll(selection) {
      // dataRoomList第一层只要有在selection里面就是全选
      const isSelect = selection.some(el => {
        const dataRoomListIds = this.dataRoomList.map(j => j.id)
        return dataRoomListIds.includes(el.id)
      })
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.dataRoomList.every(el => {
        const selectIds = selection.map(j => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        selection.map(el => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, true)
          }
        })
      }
      if (isCancel) {
        this.dataRoomList.map(el => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, false)
          }
        })
      }
    },
    selectionChange(val) {
      console.log(val)
    },
    submitContext() {},
    elIconRefresh() {},
    showInput(row, type) {
      console.log(row, type)
      row.isTime = false
      row.isType = false

      if (type === 'times') {
          row.isTime = true
      } else if (type === 'type') {
          row.isType = true
      }
      this.$forceUpdate()
    },
    onBlur(row, type) {
        if (type === 'type') {
          row.isType = false
        }
        this.$forceUpdate()
    },
    formatBg(key) {
      var row = this.radioOptions.find(v => v.dictValue === key)
      if (row) {
          return row.bg
      }
    },
    formatType(key) {
      var row = this.radioOptions.find(v => v.dictValue === key)
      if (row) {
          return row.dictLabel
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-type{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 15px;
  color: #000;
}
.room-content{
    white-space: pre;
}
/deep/.query-radio{
    .el-radio__input{
        display: none;
    }
    .el-radio__label{
        padding-left: 0;
        display: flex;
        align-items: center;
        column-gap: 3px;
        font-size: 13px;
    }
}
.prefix-number{
    // background: #000;
    // color: #fff;
    font-style: normal;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}
.scrollView{
    height: calc(100vh - 280px);
    display: flex;
    .left{
        width: 250px;
        height: 100%;
        .header{
            border: 1px solid #DAE1EB;
            background-color: #f6f7fb;
            font-size: 14px;
            padding: 7px 0;
            font-weight: bold;
            padding-left: 10px;
            color: #555;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }
        .el-tree{
            height: calc(100% - 38px);
            border: 1px solid #DAE1EB;
            border-top: 0;
            overflow: auto;
        }
        /deep/ .el-tree-node__label{
            max-width: calc(100% - 50px);
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
        }
        /deep/.el-tree-node__content {
            height: 28px;
        }
    }
    .right{
        height: 100%;
        width: calc(100% - 250px);
        .el-table{
            border-left: 0;
        }
    }
}
/deep/.el-table {
    td.el-table__cell div {
        min-height: 20px;
    }
}
/deep/.commentOpen{
  .el-dialog__body{
    // background: #f7f8fa;
    padding: 0!important;
    height: 70vh;
    .textArea{
      height: calc(100% - 130px);
      overflow: auto;
      position: relative;
      padding-top: 15px;
    }
    .modal-detail-footer {
      border-top: 1px #eee solid;
      padding: 10px 20px;
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #fff;
      height: 130px;
  }
  }
}
.avatar-icon{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  font-size: 12px;
  vertical-align: middle;
  display: inline-block;
  color: #fff;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
/deep/ .el-table{
  .el-table-column--selection{
    border-right: 0;
    border-bottom: 0;
    .cell{
      padding-right: 0;
    }
  }
  .fileType  {
    border-bottom: 0;
    border-right-color: #b8b8b8;
    .cell{
      padding-left: 0;
    }
  }
}
</style>
